.page {
    min-height: 100vh;

    .main {
        width: 100%;

        .list {
            width: 100%;

            .item {
                width: 100%;
                height: auto;
                margin: 20rpx auto;
                display: inline-block; // 设置为行内块元素

                .card {
                    width: 100%;
                    height: auto;
                    border-radius: 15rpx;
                    overflow: hidden;
                    box-sizing: border-box;
                    border: 1rpx solid #e3e2e2;

                    .pic-list {
                        width: 100%;
                        height: 450rpx;
                        overflow: hidden;
                        background-color: #fff;

                        .group {
                            width: 100%;
                            height: 100%;
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 6rpx;

                            transform: translate(-50%, -70%) rotate(33deg) scale(1.5);
                            position: relative;
                            top: 50%;
                            left: 50%;

                            .pic {
                                order: 0;

                                .image {
                                    width: 100%;
                                    height: 550rpx;
                                }
                            }

                            .pic:nth-child(2) {
                                order: -1;
                            }
                        }
                    }

                    .footer {
                        width: 100%;
                        padding: 20rpx 20rpx 30rpx;
                        box-sizing: border-box;

                        .title {
                            font-size: 38rpx;
                            font-weight: 500;
                            margin-bottom: 10rpx;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        .content {
                            display: flex;
                            justify-content: space-between;

                            .like-num,
                            .image-num {
                                font-size: 30rpx;
                                color: #ccc;
                            }
                        }
                    }
                }
            }

            .line1,
            .line2 {
                height: 12rpx;
                margin: auto;
                border-radius: 12rpx;
            }

            .line1 {
                width: 90%;
                background-color: #e3e2e2;
            }

            .line2 {
                width: 70%;
                background-color: #ebeaea;
            }
        }
    }
}
